<template>
	<view class="chat">
		<view v-if="iden == 1" class="person">
			<view class="personTou">
				<image :src="list.user_url" mode="scaleToFill" style="width: 80rpx; height: 80rpx;"></image>
			</view>
			<view class="personTouright">
				<view class="personGerenxinxi">
					<view class="personTitle">
						<text>{{list.user_name}}</text>
					</view>
					<view class="personHolder">
						<text>{{list.holder}}</text>
					</view>
				</view>

				<view class="personXianxixinxi">
					<view class="gerden">
						<text v-if="list.user_sex == 1">男</text>
						<text v-if="list.user_sex == 2">女</text>
					</view>

					<view class="personClinic">
						<text>{{list.referral}}</text>
					</view>
				</view>
			</view>
		</view>



		<!-- 诊所的头信息 -->
		<view v-if="iden == 0" class="clinic">
			<view class="clinictou">
				<image :src="list.img_url" mode="scaleToFill" style="width: 150rpx; height: 150rpx;"></image>
			</view>
			<view class="clinicTouright">
				<view class="clinicTitle">
					<text>{{list.service_title}}</text>
				</view>
				<view class="clinicArea">
					<view class="clinicPositions">
						<image src="../../static/image/qita/positions.png" mode="scaleToFill" style="width: 14rpx; height: 18rpx;"></image>
					</view>
					<view class="dizhi">
						<text>地址:</text>
					</view>
					<view class="dizhiTitle">
						<text>{{list.area_title}}{{list.address_title}}</text>
					</view>
				</view>

				<view class="clinicInfo">
					<text>{{list.synopsis}}</text>
				</view>

			</view>
		</view>
		<!-- 诊所的头信息 -->
		<scroll-view scroll-y="true" :scroll-into-view="scrollTop" :class="iden == 0 ? 'scrollView' : 'scrollViews'">
			<view class="infos" v-for="(item,index) in infos" :key="index" :id="'msg-' + index">
				<view v-if="item.state == 0" class="leftInfos">
					<view class="leftInfosImg">
						<image v-if="iden == 0" :src="list.img_url" mode="scaleToFill" style="width: 90rpx; height: 90rpx;"></image>
						<image v-if="iden == 1" :src="list.user_url" mode="scaleToFill" style="width: 90rpx; height: 90rpx;"></image>
					</view>
					<view class="leftTxt">
						<text>{{item.txt}}</text>
					</view>
				</view>

				<view v-if="item.state == 1" class="rightInfos">
					<view class="rightTxt">
						<text>{{item.txt}}</text>
					</view>
					<view class="rightInfosImg">
						<image :src="headPortrait" mode="scaleToFill" style="width: 90rpx; height: 90rpx;"></image>
					</view>
				</view>

			</view>
		</scroll-view>

		<view class="bottoms">
			<view class="shuru">
				<input type="text" v-model="txt" /> <text @click="send">发送</text>
			</view>
		</view>
	</view>
</template>

<script>
	import TIM from 'tim-wx-sdk';
	export default {
		onLoad(options) {
			this.openid = options.openid;

			// 获取自己的头像
			this.headPortrait = this.$store.state.userinfo.avatar_url;
		},
		onShow() {
			// 获取医生的信息
			this.getDatums();
			// 得到历史信息了
			this.getRecordInfo();
			// 得到聊天信息
			this.getInfo();
		},
		data() {
			return {
				// 医生的openid
				openid: null,

				infos: [],

				txt: "",
				list: null,

				chatDatas: new Map(),

				// Im的sdk号
				options: {
					SDKAppID: 1400388580
				},
				tim: null,

				// 自己的头像了吧
				headPortrait: null,
				iden: null,

				// 先定义一个变量第一次使用push方法推进
				initial: 0,

				// 滚动条的位置
				scrollTop: null,
			};
		},
		methods: {
			// 设置滚动到底部的位置了吧
			setScrollTop() {
				this.scrollTop = "msg-" + (this.infos.length - 1);
			},
			send() {
				let self = this;
				let userID = this.openid;
				let message = this.globalData.tim.createTextMessage({
					to: userID,
					conversationType: TIM.TYPES.CONV_C2C,
					payload: {
						text: self.txt
					}
				});
				this.globalData.tim.sendMessage(message).then(res => {
					let obj = {
						state: 1,
						txt: res.data.message.payload.text
					};
					self.infos.push(obj);
					self.txt = "";
					self.setScrollTop();
				}).catch(err => {
					console.warn(err);
				});
			},
			async getDatums() {
				let res = await this.$myrequest({
					url: `User/getInfo?openid=${this.openid}`
				});
				this.list = res.data.data;
				if (res.data.data.service_title == null) {
					this.iden = 1; //医生
				} else {
					this.iden = 0; //诊所
				}
			},
			getRecordInfo() {
				let self = this;
				let conID1 = `C2C${this.openid}`;
				let promise1 = this.globalData.tim.getMessageList({
					conversationID: conID1,
					count: 15
				}).then(res => {
					self.infos = res.data.messageList.map((value, key, arr) => {
						if (value.from == self.openid) {
							return {
								state: 0,
								txt: value.payload.text,
							}
						} else {
							return {
								state: 1,
								txt: value.payload.text,
							}
						};
					});
					self.setScrollTop();
				}).catch(err => {
					console.log(err);
				});
			},
			getInfo() {
				let self = this;
				let onMessageReceived = (event) => {
					if (event.data[0].conversationID == `C2C${this.openid}`) {
						let obj = {
							state: 0,
							txt: event.data[0].payload.text
						};
						self.infos.push(obj);
						self.setScrollTop();
					};
				};
				this.globalData.tim.on(TIM.EVENT.MESSAGE_RECEIVED, onMessageReceived);
			},
		}
	}
</script>

<style lang="scss">
	page {
		width: 100%;
		height: 100%;
		background-color: #F5F5F5;
	}

	.chat {
		width: 100%;
		height: 100%;
		padding: 30rpx;
		background-color: #F5F5F5;
	}

	// 个人聊天的数据了
	.person {
		height: 160rpx;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		padding: 30rpx;
		display: flex;
	}

	.personTou {
		width: 80rpx;
		height: 80rpx;
		margin-right: 20rpx;
		border-radius: 50%;
	}

	.personTouright {
		display: flex;
		flex-wrap: wrap;
		width: 100%;
	}

	.personGerenxinxi {
		display: flex;
		width: 100%;
		align-items: center;
	}

	.personTitle {
		font-size: 26rpx;
		color: rgba(0, 0, 0, 1);
	}

	.personHolder {
		height: 30rpx;
		margin-left: 20rpx;
		line-height: 30rpx;
		padding: 0 6rpx;
		border: 1rpx solid #3ACEB0;
		border-radius: 20rpx;
		@include shuipingchuijuzhong;

		>text {
			font-size: 18rpx;
			color: red;
			font-family: PingFang SC;
			font-weight: 400;
			color: rgba(58, 206, 176, 1);
		}
	}

	.gerden {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(153, 153, 153, 1);
		height: 40rpx;
		padding-right: 20rpx;
		border-right: 1rpx solid #999999;
	}

	.personXianxixinxi {
		display: flex;
		width: 100%;
		height: 40rpx;
	}

	.personClinic {
		padding-left: 20rpx;
		display: flex;
		align-items: center;
		color: #999999;
	}

	// 个人聊天的数据了

	// 底部聊天的内容信息数据的样式了吧
	.bottoms {
		padding: 10rpx 30rpx 0rpx 30rpx;
		width: 750rpx;
		height: 100rpx;
		position: fixed;
		left: 0;
		bottom: 0;
		background-color: #FFFFFF;

		.shuru {
			@include chuizhilianduan;

			>input {
				width: 549rpx;
				height: 70rpx;
				background-color: #EDEEF0;
				border-radius: 35rpx;
				padding-left: 30rpx;
			}

			>text {
				display: inline-block;
				padding: 10rpx 20rpx;
				background-color: #3ACEB0;
				color: #FFFFFF;
				border-radius: 20rpx
			}
		}
	}

	.infos {
		margin: 10rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;

		.leftInfos,
		.rightInfos {
			display: flex;
			width: 100%;
			align-items: center;

			>image {
				border-radius: 50%;
			}
		}
	}

	.leftInfosImg {
		margin-right: 50rpx;

		>image {
			border-radius: 50%;
		}
	}

	.rightInfosImg {
		margin-left: 50rpx;

		>image {
			border-radius: 50%;
		}
	}

	.leftInfos {
		justify-content: flex-start;
	}

	.rightInfos {
		justify-content: flex-end;
	}

	.leftTxt,
	.rightTxt {
		width: 60%;
		display: flex;
	}

	.leftTxt {
		>text {
			position: relative;

			&::after {
				display: block;
				content: "";
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				height: 140%;
				width: 140%;
				background-color: rgba(0, 0, 0, .04);
				border-radius: 0rpx 25rpx 25rpx 25rpx;
			}
		}
	}

	.rightTxt {
		justify-content: flex-end;

		>text {
			position: relative;

			&::after {
				display: block;
				content: "";
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				height: 140%;
				width: 140%;
				background-color: rgba(0, 0, 0, .04);
				border-radius: 25rpx 0rpx 25rpx 25rpx;
			}
		}
	}

	.scrollView {
		margin-top: 20rpx;
		height: calc(100% - 100rpx - 235rpx - 10rpx);
	}

	.scrollViews {
		margin-top: 20rpx;
		height: calc(100% - 100rpx - 110rpx - 40rpx);
	}

	// 底部聊天的内容信息数据的样式了吧

	// 诊所的样式
	.clinic {
		height: 235rpx;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		padding: 30rpx;
		display: flex;
	}

	.clinictou {
		width: 150rpx;
		height: 100%;
		margin-right: 25rpx;
		display: flex;
		justify-content: center;

		>image {
			border-radius: 10rpx;
		}
	}

	.clinicTouright {
		display: flex;
		flex-wrap: wrap;
	}

	.clinicTitle {
		display: flex;
		width: 100%;
	}

	.clinicArea {
		display: flex;
		align-content: center;
		padding-bottom: 10rpx;
		border-bottom: 1rpx solid rgba(230, 230, 230, 1);
		width: 100%;
	}

	.clinicPositions {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
	}

	.dizhiTitle,
	.dizhi {
		display: flex;
		align-items: center;
		height: 100%;

		>text {
			color: red;
			font-size: 20rpx;
			font-weight: 400;
			color: rgba(1, 0, 0, 1);
		}
	}

	.dizhi {
		margin: 0 10rpx;
	}

	.clinicInfo {
		font-size: 20rpx;
		color: rgba(153, 153, 153, 1);
	}

	// 诊所的样式
</style>
